<template>
  <div class="app-container">
    <div class="video-box">
      <span class="title">视频推荐</span>
      <div class="container-flex book">
        <div class="block" v-for="(item,index) in detailList" :key="index" @click="goToContent(item)">
          <div class="book-item">
            <span class="book-cover" :style="{backgroundImage:'url('+item.videoCover+')'}">
              <!-- <img :src="chioceImg(item.max_file_name)" alt=""> -->
            </span>
            <span class="book-name" v-html="item.videoName"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="music-box" v-show="false">
      <span class="title">音频推荐</span>
      <div class="container-flex music">
        <div class="block" v-for="(item,index) in 20" :key="index">
          <div class="music-item">
            <span class="music-cover">
              <img src="/static/images/base/music.png" alt="">
            </span>
            <span class="music-name">晓说2018</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {GetNewVideoList, GetNewVideoTwoList } from "@/api/Api";
import {index} from "@/api/index";
export default {
  data() {
    return {
      classList:[],
      classDetailList:[],
      detailList:[]
    };
  },
  created(){
    index(20).then(res=>{
      const list = res.data.data
      list.map(item=>{
        if(item.columnKindDes == 3){
            this.detailList = item.recommendResList
        }
      })
    })
    // return;
    // GetNewVideoList()
    //   .then(result=>{
    //     return this.classList = result.data
    //   })
    //   .then(result=>{
    //     result.map((value, index) => {
    //       GetNewVideoTwoList(value.type_name,9999,1)
    //         .then(result=>{
    //           result.data.map(value2 => {
    //             value2['type_name'] = value.type_name
    //           })
    //           this.classDetailList.push(...result.data);
    //         })
    //         .then(result=>{
    //           this.detailList = this.classDetailList.slice(0,20)
    //         })
    //     })
    //   })
  },
  components: {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    goToContent(item){
      this.$router.push({
        path:"/videomusic/video_nocontent",
        query:{
          video:JSON.stringify(item)
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    chioceImg(item){
      return 'http://cacv.cnki.net/Content/CACV/FM/'+item.substring(0,8)+'/'+item+'.jpg'
    }
  }
};
</script>
<style lang="less" scoped>
.video-box {
  background: #fff;
  padding: 20px;
  margin-top: 20px;
  border-radius: 10px;
  .title {
    font-size: 20px;
    display: block;
    margin: 0px 0px 20px 0px;
    padding-bottom: 20px;
    border-bottom: 1px solid #a1a1a1;
  }
  .book {
    flex-wrap: wrap;
    justify-content: flex-start;
    .block {
      margin-left: 60px;
      width: 184px;
      .book-cover {
        background: url("/static/images/base/video-box.png");
        background-size: cover;
        width: 184px;
        height: 106px;
        display: block;
        position: relative;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
        img {
          position: absolute;
          right: 20px;
          bottom: 10px;
          width: 100%;
        }
      }
      .book-name {
        margin-top: 8px;
        margin-bottom: 24px;
        display: block;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
      }
    }
    .block:nth-child(5n + 1) {
      margin-left: 0px;
    }
  }
}
.music-box {
  padding: 20px;
  margin-top: 20px;
  background: #fff;
  border-radius: 10px;
  .title {
    font-size: 20px;
    display: block;
    margin: 0px 0px 20px 0px;
    padding-bottom: 20px;
    border-bottom: 1px solid #a1a1a1;
  }
  .music {
    flex-wrap: wrap;
    justify-content: flex-start;
    .block {
      margin-left: 67px;
      width: 178px;
      .music-cover {
        background: url("/static/images/base/muisc-box.png") no-repeat;
        background-size: cover;
        width: 178px;
        height: 148px;
        display: block;
        position: relative;
        border-radius: 10px;
        img {
          position: absolute;
          right: 20px;
          bottom: 10px;
        }
      }
      .music-name {
        margin-top: 8px;
        margin-bottom: 24px;
        display: block;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .block:nth-child(5n + 1) {
      margin-left: 0px;
    }
  }
}
</style>

